<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
		<link href="bootstrap/css/index.css" rel="stylesheet"/>
		<script src="bootstrap/js/jquery-3.5.1.slim.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="bootstrap/js/index.js"></script>
		<title>首页</title>
	</head>
	<body>
		<div class="bjimg"></div>
		<div>
			<!--导航栏-->
			<nav class="navbar navbar-expand-sm dhl tou bshadow">
				<a class="navbar-brand tshadow" style="color: white;font-weight: bold;">o.O</a>
				<button class="navbar-toggler dhlbtn" type="button" data-toggle="collapse" data-target="#navtop">
					<span class="nicebutton">三</span>
				</button>
				<div class="collapse navbar-collapse" id="navtop">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item nicedhl mr-2">
							<a class="nav-link dhltc" href="index.html">首页</a>
						</li>					
						<li class="nav-item nicedhl mr-2">
							<div class="dropdown">
							  	<a class="dropdown-toggle nav-link dhltc" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
							    	类别
							  	</a>
							  	<div class="dropdown-menu">
							  		<span style="font-weight: bold;" class="ml-2 mt-3 tshadow">米哈游</span>
								    <a class="dropdown-item" href="#">崩坏学院2</a>
								    <a class="dropdown-item" href="#">崩坏3</a>
								    <a class="dropdown-item" href="#">崩坏：星穹铁道</a>
								    <a class="dropdown-item" href="#">绝区零</a>
								    <span style="font-weight: bold;" class="ml-2 mt-3 tshadow">卡普空</span>
								    <a class="dropdown-item" href="gouwu.html">怪物猎人：世界</a>
								    <a class="dropdown-item" href="gouwu3.html">怪物猎人：崛起</a>
								    <a class="dropdown-item" href="#">生化危机</a>
								    <a class="dropdown-item" href="#">街头霸王</a>
								    <span style="font-weight: bold;" class="ml-2 mt-3 tshadow">From Software</span>
								    <a class="dropdown-item" href="#">黑暗之魂</a>
								    <a class="dropdown-item" href="#">黑暗之魂2</a>
								    <a class="dropdown-item" href="#">黑暗之魂3</a>
								    <a class="dropdown-item" href="gouwu2.html">艾尔登法环</a>
								    <span style="font-weight: bold;" class="ml-2 mt-3 tshadow">大型在线</span>
								    <a class="dropdown-item" href="#">warframe</a>
								    <a class="dropdown-item" href="#">Trove</a>
								    <a class="dropdown-item" href="#">命运2</a>
								    <a class="dropdown-item" href="#">Limbus Company</a></a>
							  	</div>
							</div>
	
						</li>
						<li class="nav-item nicedhl mr-2">
							<a class="nav-link dhltc" href="#">库存</a>
						</li>
						<li class="nav-item nicedhl mr-2">
							<a class="nav-link dhltc" href="#">社区</a>
						</li>
						<li class="nav-item nicedhl mr-2">
							<a class="nav-link dhltc" href="#">个人</a>
						</li>
						<li class="nav-item nicedhl mr-2">
							<a class="nav-link dhltc" href="yuanwang.html">愿望单</a>
						</li>
					</ul>
					<a class="nicebutton" href="denlu.html">登录</a>
					<div class="dropdown">
						<button class="dropdown-toggle nicebutton" type="button" data-toggle="dropdown" aria-expanded="false">
						  语言
						</button>
						<div class="dropdown-menu">
						  <a class="dropdown-item" href="#">English</a>
						  <a class="dropdown-item" href="#">中文</a>
						  <a class="dropdown-item" href="#">日本語</a>
						</div>
					</div>
				</div>
			</nav>
			
			<!--轮播图-->
			<div class="container-fluid pt-5" >
				<div id="lunbo" class="carousel slide bshadow pt-2" data-ride="carousel">
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img src="img/img1.png" class="d-block w-100" height="400px" alt="...">
						</div>
						<div class="carousel-item">
							<img src="img/lunbo2.png" class="d-block w-100" height="400px" alt="...">
						</div>
						<div class="carousel-item">
							<img src="img/img1.png" class="d-block w-100" height="400px" alt="...">
						</div>
					</div>
					<button class="carousel-control-prev" type="button" data-target="#lunbo" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</button>
					<button class="carousel-control-next" type="button" data-target="#lunbo" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</button>
					<!--指示器-->
					<ol class="carousel-indicators">
						<li data-target="#lunbo" data-slide-to="0" class="active"></li>			    	
						<li data-target="#lunbo" data-slide-to="1"></li>
						<li data-target="#lunbo" data-slide-to="2"></li>
					</ol>
				</div>
				<div id="di" style="height: 1px;"></div>
			</div>
		</div>

		<div class="container mt-5">
			
			<div class="time bshadow">
				<strong class="tshadow">优惠倒计时</strong>
				<br>
				<span id="hour">1</span> <strong>:</strong>
				<span id="minute">2</span> <strong>:</strong>
				<span id="second">3</span>
			</div>
			<!-- 推荐 -->
			<div class="pt-3 mb-2">
				<div style="background: linear-gradient(to right,rgb(49, 70, 97),rgb(26, 51, 83));" class="bshadow w-100 p-1">
					<a class="mb-2 h2 tshadow mr-auto" style="margin-left: 15px ;color: white;" href="#">推荐</h2>
					<a class="tshadow" style="font-size: 23px; color: white;" href="#">更多</a>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-4">
					<img src="img/tuij1.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="430px">
				</div>

				<div class="col-sm-4">
					<img src="img/tuij2.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="430px">
				</div>
				
				<div class="col-sm-4">	
					<img src="img/tuij3.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="140px">
					<div class="w-100 m-1"></div>
					<img src="img/tuij4.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="140px">
					<div class="w-100 m-1"></div>
					<img src="img/tuij5.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="140px">
				</div>
			</div>

			<!-- 按钮组 -->
			<div class="row mt-4">
				<div class="col-3">
					<button class="nicebutton w-100">新品</button>
				</div>
				<div class="col-3">
					<button class="nicebutton w-100">优惠</button>
				</div>
				<div class="col-3">
					<button class="nicebutton w-100">免费</button>
				</div>
				<div class="col-3">
					<button class="nicebutton w-100">标签</button>
				</div>
			</div>



			<!-- 胶囊 -->
			<div class="mt-5">
				<ul class="nav nav-pills mb-0 ">
					<li class="nav-item">
						<a class="nav-link active " data-toggle="tab" href="#mhy">米氏全家桶</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#hun">宫崎老贼力作</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#CAPCOM">卡普空</a>
					</li>
				</ul>
				<div class="tab-content jiaonan">
					
					<div class="tab-pane fade show active" id="mhy">
						<div class="row">
							<div class="col-4">
								  <div class="list-group" id="list-tab" role="tablist">
									<a class="list-group-item list-group-item-action active" id="yuanshen-list" data-toggle="list" href="#yuanshen" role="tab" aria-controls="home">原神</a>
									<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">崩坏3</a>
									<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">崩坏：星穹铁道</a>
									<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">绝区零</a>
								</div>
							</div>
							<div class="col-8 bshadow liebiao">
								  <div class="tab-content" id="nav-tabContent">
									<div class="tab-pane fade show active mt-2" style="color: white;" id="yuanshen" role="tabpanel" aria-labelledby="yuashen-list">《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。</div>
									<div class="tab-pane fade mt-2" style="color: white;" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">《崩坏3》——点燃国创动作游戏之魂！ 3D全视角卡通渲染、无限可能的分支连招，酣畅淋漓的超强打击感……打造次世代动作游戏！ 扣人心弦的崩坏系列故事、沉浸感十足的关卡剧情、豪华的声优阵容，更会让你感受到前所未有的代入感。</div>
									<div class="tab-pane fade mt-2" style="color: white;" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">你——一名特殊的旅客，将与继承「开拓」意志的同伴一起，乘坐星穹列车穿越银河，沿着某位「星神」曾经所行之途前进。 你将由此探索新的文明，结识新的伙伴，在无数光怪陆离的「世界」与「世界」之间展开新的开拓之旅</div>
									<div class="tab-pane fade mt-2" style="color: white;" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">7月2日公测，敬请期待</div>
								  </div>
							</div>
						</div>
					</div>
					
					<div class="tab-pane fade" id="hun">
						<div class="row">
							<div class="col-4">
							  	<div class="list-group" id="list-tab" role="tablist">
									<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">艾尔登法环</a>
								</div>
							</div>
							<div class="col-8 bshadow liebiao">
								<div class="tab-content" id="nav-tabContent">
									<div class="tab-pane fade show active" style="color: white;" id="list-home" role="tabpanel" aria-labelledby="list-home-list"><img src="img/liebiao1.jpg" class="bshadow mt-2 imgfudon" style="height: 150px; border-radius: 15px;"/><img src="img/liebiao2.jpg" class="bshadow mt-2 imgfudon" style="height: 150px; border-radius: 15px;"/><br>艾尔登法环是以正统黑暗奇幻世界为舞台的动作RPG游戏。 走进辽阔的场景与地下迷宫探索未知，挑战困难重重的险境，享受克服困境时的成就感吧。 不仅如此，登场角色之间的利害关系谱成的群像剧，更是不容错过。</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="tab-pane fade" id="CAPCOM">
						<div class="row mt-5">
							<div class="col-4" >
								<img src="img/img5.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="220px">
							</div>
							<div class="col-4" >
								<img src="img/img6.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="220px">
							</div>
							<div class="col-4" >
								<img src="img/img7.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="220px">
							</div>
							
						</div>
					</div>
					
				</div>
			</div>
			
			
			<!--图表-->
			<div class="row mt-5">
				<div class="col-sm-6" >
					<img src="img/img7.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="420px">
				</div>

				<div class="col-sm-3">	
					<img src="img/tuij6.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="210px">
					<div class="w-100 m-1"></div>
					<img src="img/tuij7.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="210px">
				</div>

				<div class="col-sm-3">	
					<img src="img/tuij8.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="210px">
					<div class="w-100 m-1"></div>
					<img src="img/tuij9.png" class="w-100 bshadow imgfudon" style="border-radius: 8px;" height="210px">
				</div>
			</div>

			
		</div>

		<footer class="w-100 weibu mt-5 pt-2 pb-2">
			<a href="#">隐私政策</a> | <a href="#">法律信息</a> | <a href="#">关于我们</a> | <a href="#">联系方式</a> | <a href="#">客服</a><br>
			<a>&copy;Copyright 2024 Administrator. All Rights Reserved. </a>
		</footer>
	</body>
</html>
